<script setup lang="ts">
import {ref, watchEffect} from "vue";
import {upload} from  '@/api/upload.ts'
const props = defineProps(['content'])
const content=ref()
watchEffect(()=>{
  const contentReal = props.content
  if (contentReal){
    content.value = contentReal
  }
})
const mavonEditorRef = ref()

const imgs = ref([])
const imgAdd = (pos:any,$file:any)=>{
  const formData = new FormData();
  formData.append("file",$file);
  imgs.value[pos]=$file
  upload(formData).then((data:any)=>{
    let url = import.meta.env.VITE_API_URL+data.data
    console.log(url);
    mavonEditorRef.value.$img2Url(pos,url);
  })
}
const imgDel=(pos)=>{
  // imgs.value.pop(pos)
  delete imgs.value[pos]
}
const emit=defineEmits(['contentData'])
const editdata=()=>{
  var obj = {content:mavonEditorRef.value,contentHtml:mavonEditorRef.value.d_render}
  emit('contentData',obj)
}
</script>

<template>
  <mavon-editor class="editor" ref="mavonEditorRef" v-model="content"  :ishljs="true"
                @imgAdd="imgAdd" @imgDel="imgDel" @change="editdata"/>
</template>

<style scoped>
.editor{
  height:60vh;
  width:100%;
}
</style>